<script setup lang="ts">
import { getAuthListApi } from '@/api/auth'
import type { AuthListRes } from '@/types/auth'
import { ref } from 'vue'
const authList = ref([] as AuthListRes[])
const getAuthList = async () => {
  const res = await getAuthListApi()
  authList.value = res.data.data as AuthListRes[]
}
getAuthList()
</script>

<template>
  <el-card>
    <!-- 权限表格 -->
    <el-table
      :data="authList"
      border
      stripe
      row-key="auth_id"
      :tree-props="{ children: 'children' }"
      default-expand-all
    >
      <el-table-column label="权限名称" prop="auth_name"></el-table-column>
      <el-table-column label="种类" align="center" prop="type">
        <template v-slot="{ row }">
          <el-tag :type="row.type === 1 ? 'primary' : 'success'">{{
            row.type === 1 ? '菜单' : '按钮'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="路由" align="center" prop="component" width="250"></el-table-column>
      <el-table-column label="组件缓存" align="center" prop="keep_alive">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.keep_alive"
            width="60"
            inline-prompt
            active-text="已缓存"
            inactive-text="未缓存"
            :active-value="1"
            :inactive-value="0"
            style="--el-switch-on-color: #71e2a3; --el-switch-off-color: #fb8f90"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column label="组件路径" align="center" prop="path"></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{}">
          <el-button type="primary">更新</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped lang="scss"></style>
